<template>
	<!--活动管理页面-->
	<view class="">
		<view class="select-tab">
			<view class="tabs" style="width: 68%; margin: 0 auto;background: #fff;">
				<v-tabs   v-model="activeTab"  :tabs="cateList"  @change="changeTab" :scroll="false" activeColor="#0068ff" lineColor="#0068ff" lineHeight="3px" height="90rpx" bold="true" />
			</view>
		</view>
		
		<view class="poem-area" >
			<view class="act-list" v-if="actList.length > 0 ">
				<view class="act-item " v-for="(item,index) in actList" :key="index"  @tap.stop="goto('/pages/activity/comps/Detail?id='+item.id)" >
					<view class="type-desc">
						<image src="/static/images/icon/online_act_icon.png" mode="aspectFill" v-if="item.type == '线上'"></image>
						<image src="/static/images/icon/offline_act_icon.png" mode="aspectFill" v-else></image>
					</view>
					<view class="top">
						<view class="tui-news-picbox">	
							<block >
								<image :src="item.cover" mode="aspectFill" class="tui-block"></image>  
							</block>
						</view>
						<view class="tui-news-tbox tui-flex-column " >
							<view class="desc">
								<view class="title" v-html="item.title"></view>
								<view class="status" v-if="activeTab === 0">
									{{item.status}}
								</view>
							</view>
							
							<view class="intro" v-html="item.intro"></view>
							<view class="other">
								<view class="time">{{item.start_at }} ~ {{item.end_at }} </view>
								<view class="joined"v-if="item.joined" >
									<image src="/static/images/icon/heat.png" mode="" v-if="item.joined >= 10"></image>
									<view class="">{{item.joined}}人参加</view>
								</view>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="wait_check" v-if="item.check_id == '待审核' ">待审核</view>
						<view class="edit" v-if="item.status !== '进行中'" @tap.stop="editAct(item.id)">修改</view>
						<view class="del" @tap.stop="delAct(item.id,index)">删除 </view>
						<view class="regis_list" v-if="item.status !== '未开始'" @tap.stop="regisList(item.id,item.type)">报名名单</view>
					</view>
				</view>
			</view>
			
			<view class="none" v-else-if=" !actList.length">
				还没有进行中的活动喔~_~
			</view>
		</view>
		
		<view class="create-area">
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="create" v-if="!had_phone">发布活动</button>
			<view class="create" @tap.stop="goto('/pages/activity/comps/createActivity')" v-else>发布活动</view>
		</view>
	</view>
	
</template>

<script>
	import api from '../../../common/api.js'
	export default {
		
		data() {
			return {
				had_phone:this.$store.state.phone,
				activeTab:0,
				cateList:[{name:'全部'},{name:'未开始'},{name:'进行中'},{name:'已结束'}],
				actList:[],
			}
		},
		
		async onShow() {
			await this.getCorrespondingData()
		},
		
		methods:{
			
			async changeTab(e) {//切换选项
				this.activeTab = e
				await this.getCorrespondingData()
			},
			
			async getCorrespondingData() {//根据当前activeTab请求对应活动列表数据
				if(this.activeTab == 0) {
					this.actList = await api.GetUserAllAct() 
				}else if(this.activeTab == 1) {
					this.actList = await api.GetUserUnworkedAct() 
				}else if(this.activeTab == 2) {
					this.actList = await api.GetUserWorkingAct() 
				}else if(this.activeTab == 3) {
					this.actList = await api.GetUserWorkOutAct() 
				}
			},
			
			async delActivity(id) {//实际删除活动操作
				await api.DelActivity(id)
				await this.getCorrespondingData()
			},
			
			goto(url) {//相关页面跳转
				uni.navigateTo({
					url
				})
			},
			
			delAct(id,index) {//删除操作
				var that = this
				uni.showModal({
					title:'提示',
					content:'确认删除',
					success:res => {
						if(res.confirm) {
							this.delActivity(id)
							
						}
					}
				})
			},
			
			editAct(actid) {//修改活动信息
				uni.navigateTo({
					url:'/pages/activity/comps/activityEdit?actid=' + actid
				})
			},
			
			regisList(act_id,act_type) {//查看报名名单
				uni.navigateTo({
					url:'/pages/activity/comps/regisList?act_id=' + act_id +'&act_type=' + act_type
				})
			},
			
			async getPhoneNumber (e) {//手机号授权
				console.log(e);
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
				console.log(e.detail.encryptedData,e.detail.iv);
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						console.log('+++++++++++',res );
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						console.log(sres);
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							this.goto('/pages/activity/comps/createActivity')
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
		},
		
	}
</script>

<style lang="scss">
.select-tab {
	width: 750rpx;
	top: 0;
	height: 90rpx;
	position: fixed;
	z-index: 99;
	background-color: #ffffff;
	background-color: #fff;
	border-bottom: 4rpx solid #F3F6F5;
}
.poem-area,.novel-area {
  
	background: #F3F3F3;
}
.act-item {
	position: relative;
	margin: 15rpx 0;
	padding: 10rpx 30rpx;
	background: #fff;
	.type-desc {
		position: absolute;
		left: 0;
		top: 0;
		z-index:1;
		image {
			width: 125rpx;
			height: 125rpx;
		}
	}
}

.act-list {
	// margin-top: 110rpx;
	margin: 115rpx 0 165rpx;
	.top {
		display: flex;	
		align-items: center;
		box-sizing: border-box;
		overflow: hidden;
		padding: 24rpx 0 0;
	}
	.bottom {
		display: flex;
		flex-direction: row-reverse;
		.del,.edit,.wait_check,.regis_list {
			width: 110rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			border-radius: 31rpx;
			font-size: 28rpx;
			color: #6E6E6E;
			margin: 10rpx 10rpx 0;
			border: 1rpx solid #EAEAEA;
		}
		.regis_list {
			width: 160rpx;
		}
		.wait_check {
			color: #DE5A54;
			border: 1rpx solid #E78680;
		}
	}
}
.tui-block {
	display: block;
}
.tui-news-tbox {	
	width: 450rpx;
	height: 150rpx;
	display: flex;
	margin-left: 20rpx;
	.desc {
		display: flex;
		justify-content: space-between;
		.title {
			font-size: 32rpx;
		}
		.status {
			color: #999999;
			font-size: 26rpx;
		}
	}
	
	.intro {
		width: 400rpx;
		font-size: 30rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.other {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;	
		font-size: 26rpx;
		height: 30rpx;
		color: #999999;
		.visited {
			width: 150rpx;
		}
		.joined {
			display: flex;
			// width: 200rpx;
			image {
				width: 25rpx;
				display: block;
				height: 28rpx;
				margin-right: 8rpx;
			}
		}
		.time {
			overflow: hidden;
			white-space: nowrap;
			// text-overflow: ellipsis;
		}
	}
}
.tui-news-picbox {
	display: flex;
	align-items: center;
	position: relative;
	justify-content: space-between ;
	width: 220rpx;
	height: 150rpx;
	image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	}
}
.tui-flex-center {
	align-items: center !important;
}

.tui-flex-column {
	flex-direction: column ;
	justify-content: z-index;
}

.tui-flex-between {
	justify-content: space-between ;
}
.create-area {
	position: fixed;
	z-index:99;
	height: 150rpx;
	width: 750rpx;
	bottom: 0;
	background-color: #fff;
	border-top: 1rpx solid #F3F6F5;
	button {
		padding: 0;
		// margin: 0;
		// background: transparent;
		// display: flex;
		// align-items: center;
		font-size: 32rpx;
	}
}
.none {
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #A7AAB5;
}
.create {
	position: absolute;
	bottom: 0;
	top: 0;
	width: 600rpx;
	height: 82rpx;
	margin: auto;
	left: 0;
	right: 0;
	border-radius: 50rpx;
	text-align: center;
	line-height: 82rpx;
	color: #FFFFFF;
	border-radius:60rpx;
	background-color: #0068FF;
	// position: fixed;
}
</style>
